<template>
  <div>
    <el-row>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="grid-content bg-purple">
            <div class="dd">
        <div class="cc"><img :src="item.img" /></div>
        <div class="ee">
        <div class="aa">{{ item.name }}</div>
        <div class="bb">{{ item.price }}</div>
          </div>
          </div>
         </div>
         </el-col>
    </el-row>

<div class="ae">
    <el-row>
         <div class="ab">待处理事务</div>
      <el-col :span="8" v-for="(item, index) in shiwuArr" :key="index">
        <div class="grid-content bg-purple">
            <div class="ac">
                <div class="ad">
        <span >{{ item.name }}</span>
        <span class="an">{{ item.num }}</span>
          </div>
         </div>
        </div>
         </el-col>
    </el-row>
    </div>


    <!-- <div class="ae" >
      <div class="ab">待处理事务</div>
      <div class="ac">
<div>
        <div class="ad"><span>待付款订单</span><span class="an">(10)</span></div>
        <div class="ad"><span>已完成订单</span><span class="an">(5)</span></div>
        <div class="ad"><span>待确认收货订单</span><span class="an">(20)</span></div>
</div>
<div>
        <div class="ad"><span>待发货订单</span><span class="an">(30)</span></div>
        <div class="ad"><span>新缺货登记</span><span class="an">(6)</span></div>
        <div class="ad"><span>待处理退款申请</span><span class="an">(8)</span></div>
</div>
<div>
        <div class="ad"><span>已发货订单</span><span class="an">(12)</span></div>
        <div class="ad"><span>待处理退货订单</span><span class="an">(9)</span></div>
        <div class="ad"><span>广告位即将到期</span><span class="an">(10)</span></div>
           </div> 
        
      </div> 
    </div> -->
   <div class="ag">
       <div class="ai">
    <el-row>
         <div class="ah">商品总览</div>
      <el-col :span="6" v-for="(item, index) in shangpinArr" :key="index">
        <div class="grid-content bg-purple">
            <div class="aj">
            <div class="as">
        <p class="ak">{{ item.num }}</p>
        <p>{{ item.name }}</p>
          </div>
          </div>
         </div>
        
         </el-col>
    </el-row>
   </div>
    <div class="av">
    <el-row>
         <div class="ah">用户总览</div>
      <el-col :span="6" v-for="(item, index) in yonghuArr" :key="index">
        <div class="grid-content bg-purple">
            <div class="aj">
            <div class="as">
        <p class="ak">{{ item.num }}</p>
        <p>{{ item.name }}</p>
          </div>
          </div>
         </div>
        
         </el-col>
    </el-row>
   </div>
    </div>


        <!-- <div class="ag">
            <div class="ai">
            <div class="ah">商品总览</div>
            <div class="aj">
                <div class="as"> <p class="ak">100</p> <p>已下架</p></div>
                <div class="as"> <p class="ak">400</p> <p>已上架</p></div>
                <div class="as"> <p class="ak">50</p> <p>库存紧张</p></div>
                <div class="as"> <p class="ak">500</p> <p>全部商品</p></div>
            </div>
            </div>
        
        <div class="av">
             <div class="ah">用户总览</div>
            <div class="aj">
                <div class="as"> <p class="ak">100</p> <p>今日新增</p></div>
                <div class="as"> <p class="ak">200</p> <p>昨日新增</p></div>
                <div class="as"> <p class="ak">1000</p> <p>本月新增</p></div>
                <div class="as" ><p class="ak">5000</p> <p>会员总数</p></div>
            </div>
            </div>
        </div> -->
        <!-- <div class="az">
    <el-row>
         <div class="am">订单统计</div>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="grid-content bg-purple">
            
                <div class="bd">
        <p >{{ item.name }}</p>
        <p class="an">{{ item.num }}</p>
         <p class="ba">{{ item.sj}}</p> -->

          <!-- </div>
           <div></div> -->
         
        <!-- </div>
         </el-col>
    </el-row>

    </div>  -->

    <!-- <div class="az">
    <el-row>
         <div class="am">订单统计</div>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="grid-content bg-purple">
           
                <div class="bd">
        <p>{{ item.name }}</p>
        <p class="bc">{{ item.num }}</p>
         
         </div>
        </div>
         </el-col>
    </el-row>
    </div> -->
    

        <div class="az">
            <div class="am">订单统计</div>
            <div class="ca">
            <div class="bd">
                <p>本月订单统计</p>
                <p class="bc">10000</p>
                <p><span class="ba">+10%</span>同比上月</p>
                 <p>本周订单总数</p>
                  <p class="bc">1000</p>
                   <p><span class="be">-10%</span>同比上周</p>
                   <p>本月销售总额</p>
                   <p class="bc">100000</p>
                   <p><span class="ba">+10%</span>同比上月</p>
                   <p>本月销售总额</p>
                   <p class="bc">50000</p>
                   <p><span class="be">-10%</span>同比上周</p>
            </div>
             <div id="mychart" class="mychart"></div>
        </div>
    </div>
    <!-- 显示图表 -->
    
  </div>
</template>

<script>
export default {
  name: "home",
  data: function () {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          //在 js里面获取 vue项目的本地图片 ，需要使用  require
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日销量总额",
          price: "5000",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "昨日销售总额",
          price: "3000",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],
shiwuArr:[
    {
        id:1,
        name:"待付款订单",
        num:"(10)",
    },
    {
        id:2,
        name:"已完成订单",
        num:"(5)",
    },
    {
        id:3,
        name:"待确认收货订单",
        num:"(20)",
    },
    {
        id:1,
        name:"待发货订单",
        num:"(30)",
    },
    {
        id:2,
        name:"新缺货登记",
        num:"(6)",
    },
    {
        id:3,
        name:"待处理退款订单",
        num:"(8)",
    },
    {
        id:1,
        name:"已发货订单",
        num:"(12)",
    },
    {
        id:2,
        name:"待处理退货订单",
        num:"(9)",
    },
    {
        id:3,
        name:"广告位即将到期",
        num:"(20)",
    },
],
shangpinArr:[
    {
        id:1,
        num:"100",
        name:"已下架",
},
{
        id:2,
        num:"400",
        name:"已上架",
},
{
        id:3,
        num:"100",
        name:"库存紧张",
},
{
        id:4,
        num:"50",
        name:"全部商品",
},
],
yonghuArr:[
    {
        id:1,
        num:"100",
        name:"今日新增",
},
{
        id:2,
        num:"200",
        name:"昨日新增",
},
{
        id:3,
        num:"1000",
        name:"本月新增",
},
{
        id:4,
        num:"5000",
        name:"会员总数",
},
],
// dingdanArr:[
//     {
//         id:1,
//         name:"本月订单统计",
//         num:"10000",
//         // sj:"+10%同比上月",
// },
// {

//         id:2,
//         name:"本月订单统计",
//         num:"1000",
//         // sj:"+10%同比上月",
// },
// {

//         id:3,
//         name:"本月订单统计",
//         num:"100000",
//         // sj:"+10%同比上月",
// },
// {

//         id:4,
//         name:"本月订单统计",
//         num:"50000",
//         // sj:"+10%同比上月",
// },
// ],
daichuliArr: [{ id: 1, name: "代付款订单", num: 10 }],
     option: {
        //图表数据
        //x轴数据
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        //y轴
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [400, 200, 150, 80, 70, 110, 200],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
    };
  },
   mounted() {
    //调用 画图表的函数
    this.drawLine();
  },
  methods: {
    drawLine() {
      //1.初始化
      let mycharts = this.$echarts.init(document.getElementById("mychart"));
      //2.绘制
      mycharts.setOption(this.option);
    },
  },
};
</script>

<style>
.dd{
    margin-top:44px;
    margin-left: 32px;
    width:243px;
    height:58px;
    border: 1px solid #ccc;
    display: flex;
    padding:12px;
}
.cc img{   
width:30px;
height: 36px;
line-height: 36px;
}
.ee{
margin-left: 10px;
}
.ab{
    /* width:100%; */
    height: 50px;
    line-height: 50px;
    background-color:#f2f6fc;
    font-size: 700;
    padding-left: 20px;
}
.ac{
    display: flex;
    height: 70px;
}
.ad{
    width:350px;
    height:40px;
    line-height: 40px;
    margin-left: 20px;
     display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #ccc;
   
}
.ae{
    margin-left: 32px;
    margin-top:22px;
    border: 1px solid #ccc;
}

.ag{
     margin-left: 32px;
    margin-top:22px;
   display: flex; 
   justify-content: space-between;
}
.ah{
    /* width:620px; */
    height: 188px;
    height: 46px;
    line-height: 46px;
    
    background-color:#f2f6fc;
    font-size: 700;
    padding-left: 20px;
}
.ai{
border: 1px solid #ccc;
height: 184px;
width:520px;
}
.aj{
   display: flex; 
   justify-content: space-around;
   width:150px;
   
}
.as{
   margin-top: 40px;
  
}
.ak{
    color: red;
    text-align: center;
}
.av{
  border: 1px solid #ccc;
height: 184px;
margin-left: 20px;  
width:520px;
}
.an{
color: red;
}
.az{
    margin-left: 32px;
    margin-top:22px;
    border: 1px solid #ccc;
}
.am{
    background-color:#f2f6fc;
    padding-left: 20px;
    height:46px;
    line-height: 46px;
}
.ba{
    color:green;
}
.be{
    color:red;
}
.bc{
    font-size: 18px;
    padding-left: 22px;
   
}
.bd{
     padding-left: 16px;
    width:210px;
    height: 500px;
    border-right:1px solid #ccc;
}
.ca{
    display: flex;
}
.mychart{
    height: 400px;
    width:600px
}

</style>